<template>
  <div class="search">
    <p
      class="info"
      v-text="`Found ${list.total} book contain “${$route.params.keywords}”`"
    ></p>
    <main v-if="list && list.total > 0">
      <ul class="info-list">
        <list-template
          v-for="item of list.rows"
          :key="item.bookId"
          :item="item"
          :diff="'search-list'"
        />
      </ul>
      <ul class="pagination-box" v-show="list.pages > 1">
        <li class="pre-page">
          <mt-button @click.native="prePage">
            <svg-icon
              class="preIcon"
              icon-class="preIcon"
              slot="icon"
            ></svg-icon>
            Previous page
          </mt-button>
        </li>
        <li class="cur-total">
          <span class="current" v-text="list.current"></span>
          /
          <span class="total" v-text="list.pages"></span>
        </li>
        <li class="next-page">
          <mt-button @click.native="nextPage">
            Next page
            <svg-icon
              class="nextIcon"
              icon-class="nextIcon"
              slot="icon"
            ></svg-icon>
          </mt-button>
        </li>
      </ul>
    </main>
    <div class="empty" v-else-if="list.total == 0">
      <dl>
        <dt>
          <svg-icon icon-class="searchEmpty"></svg-icon>
        </dt>

        <dd>No resources available</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  data() {
    return {
      list: {}, //书籍列表
      params: {
        pageNum: 1,
        pageSize: 10,
        content: this.$route.params.keywords,
      },
      loading: true,
    };
  },
  components: {
    listTemplate,
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.search();
  },
  methods: {
    // 上一页
    prePage() {
      if (this.list.current > 1) {
        this.params.pageNum -= 1;
        this.search();
      } else {
        return;
      }
    },
    // 下一页
    nextPage() {
      if (this.list.current < this.list.pages) {
        this.params.pageNum += 1;
        this.search();
      } else {
        return;
      }
    },
    async search() {
      this.loading = true;
      try {
        let res = await this.$api.home.search(this.params);
        if (res.code === 1) {
          this.list = res.source;
          this.loading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  padding: 40px;
  > .info {
    line-height: 40px;
    font-size: 28px;
    font-weight: bold;
  }
  main {
    .info-list {
      margin-top: 40px;
    }
    .pagination-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .pre-page,
      .next-page {
        width: 208px;
        height: 58px;
        .mint-button {
          width: 100%;
          height: 100%;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: space-around;
          background: #e86472;
          border-radius: 4px;
          font-weight: 600;
          color: #fff;
          font-size: 22px;
          .mint-button-icon {
            .svg-icon {
              width: 11px;
              height: 24px;
            }
          }
        }
        &.next-page {
          .mint-button {
            flex-direction: row-reverse;
          }
        }
      }
      .cur-total {
        color: #999999;
        font-size: 20px;
      }
    }
  }
  .empty {
    margin-top: 211px;
    dl {
      display: flex;
      flex-direction: column;
      align-items: center;
      dt {
        .svg-icon {
          width: 268px;
          height: 218px;
        }
      }
      dd {
        margin-top: 33px;
      }
    }
  }
}
</style>
